<template>
  <div :class="['btns', { isPosition: type == 0 }]">
    <span v-show="item.count > 0" @click="increment(item)">-</span>
    <em v-show="item.count > 0">{{ item.count }}</em>
    <span @click="add(item)">+</span>
  </div>
</template>

<script>
export default {
  props: ["item", "type"],
  methods: {
    add(food) {
      // food.count++;
      if (!food.count) {
        food.count = 1;
      } else {
        food.count++;
      }
      this.$store.commit("setCarList", {
        item: food,
      });
    },
    increment(food) {
      food.count--;
    },
  },
};
</script>

<style lang="less" scoped>
.btns {
  display: flex;
  span {
    display: block;
    width: 24px;
    height: 24px;
    line-height: 20px;
    border-radius: 50%;
    font-size: 24px;
    text-align: center;
    font-weight: bold;
    color: rgb(0, 160, 220);
    border: 2px rgb(0, 160, 220) solid;
  }
}
.isPosition {
  position: absolute;
  right: 10px;
  bottom: 10px;
}
</style>
